<template>
	<div class="header-page">
		<van-tabs v-model="navTabs.selected" @change="onChange"><van-tab v-for="(item, i) in navTabs.options" :key="i" :title="item.text"></van-tab></van-tabs>
		<!-- <div class="nav">
			<router-link to="/">首页</router-link>		|
			<router-link to="/about">关于</router-link>|
			<router-link to="/todo">Toto案例</router-link>|
			<router-link :to="{name:'login'}">登录</router-link>
		</div> -->
		<div class="line"></div>
	</div>
</template>

<script>
export default {
	data() {
		return {
			navTabs: {
				selected: null,
				options: [
					{
						text: '首页',
						routeName: 'home'
					},
					{
						text: '关于',
						routeName: 'about'
					},
					{
						text: '案例',
						routeName: 'todo'
					},
					{
						text: '登录',
						routeName: 'login'
					},
					{
						text: '商品',
						routeName: 'productList'
					}
				]
			}
		};
	},

	methods: {
		onChange() {
			const index = this.navTabs.selected;
			const name = this.navTabs.options[index].routeName;
			console.log(index);
			//编程式导航
			this.$router.push({ name: name });
		}
	}
};
</script>

<style scoped>
.header-page {
	margin: 10px;
}
.van-tab {
	font-size: 24px;
}

.nav {
	font-size: 24px;
}
.line {
	margin-top: 8px;
	height: 1px;
	width: 100%;
	background-color: gainsboro;
}
</style>
